<template>
  <div class="indexPage">
    <!-- 未登录部分 -->
    <div class="loginPage"
         v-if="showModel">
      <div class="model">
        <div class="modleContent">
          <div class="modelTitle">
            <img src="https://dati.co-links.com/static/xadmin/images/index.png">
          </div>
          <div class="modelBody">
            <p style="font-weight:bold;text-align:center;padding-top:70rpx;padding-bottom:40rpx">竞赛参与方式及注意事项：
            </p>
            <p>1、参赛流程：填写手机号码、真实姓名，选择本人所属企业、是否为党员，开始答题。</p>
            <p> 2、答题时间为3个小时，答题中途退出系统或超时（3个小时）未完成答题，系统将自动提交答卷，以实时答题情况计算成绩，并作为最终结果给出“成绩单”。</p>
            <p> 3、答题过程中不允许跳题作答，按照题目顺序依次作答。</p>
            <div class="btns">
              <button open-type="getUserInfo"
                      :disabled="disabled"
                      class="agree"
                      lang="zh_CN"
                      @getuserinfo="getUser">{{setting}}</button>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- 登录部分显示首页 -->
    <div class="indexMain"
         v-if="hasAnswer">
      <div class="tranScoreMain">
        <div>
          <div class="tranScoreTop">
            <p class="transName">{{actual_name}}</p>
            <p class="tranScore">{{effect}}分</p>
          </div>
          <div class="tranDetail">
            <div class="tranDetailTitle">
              <span style="color:#ef5151">本次考试您已经作答过了哦</span>
            </div>
            <div class="tranDetailTotal">
              总分：
              <span>{{fraction}}</span>分 合格分数线：
              <span>{{(fraction*0.6)}}</span>分 答卷耗时：
              <span>{{lastHour}}</span>时
              <span>{{lastMin}}</span>分
              <span>{{lastSec}}</span>秒
            </div>
            <div class="tranTable">
              <div class="trabTableTop">
                <p>题型</p>
                <p>总题数</p>
                <p>答对题数</p>
                <p>总分</p>
                <p>得分</p>
              </div>
              <div class="trabTableList">
                <p>单选题</p>
                <p>{{effect_num}}</p>
                <p>{{num}}</p>
                <p>{{fraction}}</p>
                <p>{{effect}}</p>
              </div>
              <div class="trabTableBottom">
                本次考试共{{effect_num}}道题，总分{{fraction}}分，您做对{{num}}道题，得到
                <span>{{effect}}</span> 分.
              </div>
            </div>
            <div class="menuMain">
              <div class="topicSelect">
                <div class="singleSelection">
                  <div class="singleList">
                    <span v-for="(el,i) in commitAnswer"
                          :class='{"right":el.right ==1,"wrong":el.right==0}'
                          :key=i>{{i+1}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="expireTime"
         v-if="expireTime">
      <img :src=exImg>
      <div class="outSide">
        <div class="outsideBox">
          <p class="p1">温馨提示</p>
          <p class="p2">1、竞赛时间： 2018年9月18日（星期二）上午9:00-2018年9月20日（星期四）下午17:00。</p>
          <p class="p3"> 2、学习资料请自行登录“清风恒天”微信公众号，在“廉洁中国”板块中选择“党纪国法”菜单查看复习内容。</p>
        </div>
        <div class="center">

        </div>
        <div class="inner">

        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { formatTime } from '@/utils'
export default {
  data () {
    return {
      activeIndex: 1,
      expireTime: false,
      endTime: '2018-09-12 05:30',
      startTime: '2018-09-13',
      hasAnswer: false,
      imageList: {
        selectType: 'https://dati.co-links.com/static/xadmin/images/selected.png',
        color: 'https://dati.co-links.com/static/xadmin/images/color.jpg',
        option1: 'https://dati.co-links.com/static/xadmin/images/option1.jpg',
        option2: 'https://dati.co-links.com/static/xadmin/images/option2.jpg',
        option3: 'https://dati.co-links.com/static/xadmin/images/option3.jpg',
        option4: 'https://dati.co-links.com/static/xadmin/images/option4.jpg',
        option5: 'https://dati.co-links.com/static/xadmin/images/option5.jpg',
        option6: 'https://dati.co-links.com/static/xadmin/images/option6.jpg',
        exam: 'https://dati.co-links.com/static/xadmin/images/exam.jpg',
        border: 'https://dati.co-links.com/static/xadmin/images/border.png',
        study: 'https://dati.co-links.com/static/xadmin/images/study.png'

      },
      formalPaper: [],
      disabled: false,
      initId: 0,
      show: true,
      text: '',
      telError: false,
      setting: '进入答题',
      inputType: 'password',
      password: '',
      showPassword: false,
      passwordError: false,
      info: './../../static/images/info.jpg',
      showModel: false,
      totalArea: [],
      originData: -1,
      effect: 0,
      actual_name: '',
      effect_num: 0,
      fraction: 100,
      longtime: '3200',
      num: 0,
      lastHour: 0,
      lastMin: 0,
      lastSec: 0,
      exImg: './../../static/images/index2.png',
      commitAnswer: []
    }
  },
  computed: {
    ...mapState({
      currentExam: state => state.currentExam
    })
  },
  methods: {
    ...mapMutations(['setExamSubject', 'setExamPaper', 'setUserInfo']),
    getUser (e) {
      var $this = this
      wx.getSetting({
        success (res) {
          if (!res.authSetting['scope.userInfo']) {
            $this.showModel = true
            // console.log('hasbenn authSetting ')
          } else {
            // console.log('wx.loginIn')
            wx.login({
              success: (res) => {
                var code = res.code
                // console.log(res)
                // console.log(code)
                if (res.code) {
                  $this.userInfo = e.mp.detail.userInfo
                  // console.log(e.mp.detail.userInfo)
                  $this.$http.post('https://dati.co-links.com/user/weixin_login/', {
                    code: code,
                    nickName: e.mp.detail.userInfo.nickName,
                    avatarUrl: e.mp.detail.userInfo.avatarUrl,
                    encrypted: e.mp.detail.encryptedData,
                    iv: e.mp.detail.iv,
                    gender: e.mp.detail.userInfo.gender,
                    language: e.mp.detail.userInfo.language,
                    city: e.mp.detail.userInfo.city,
                    province: e.mp.detail.userInfo.province,
                    country: e.mp.detail.userInfo.country
                  }).then((res) => {
                    $this.startTime = (formatTime(res.data.data.start_time).replace(/-/g, '/'))
                    $this.endTime = (formatTime(res.data.data.end_time).replace(/-/g, '/'))
                  
                    var nowDate = +new Date()
                    if (nowDate < +new Date($this.startTime) ||
                      nowDate > +new Date($this.endTime)
                    ) {
                      $this.expireTime = true
                      $this.showModel = false
                      return false
                    } else {
                      if (res.data.code === '0000') {
                        $this.setUserInfo({
                          openid: res.data.data.openid,
                          avatarUrl: e.mp.detail.userInfo.avatarUrl,
                          nickName: e.mp.detail.userInfo.nickName
                        })
                        wx.setStorageSync('openId', res.data.data.openid)
                        wx.navigateTo({
                          url: '../login/main'
                        })
                      } else {
                        wx.showModal({
                          title: '提示',
                          content: '获取微信服务器数据失败，请删除小程序之后再试'
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        }
      })
    }
  },
  mounted () {
    let that = this
    // that.timer = setTimeout(() => {
    //   that.disabled = false
    // }, 3000)
    if (wx.getStorageSync('openId') && wx.getStorageSync('user_id')) {
      // if (wx.getStorageSync('finshed')) {
      this.showModel = false
      this.hasAnswer = true
      // 数据请求
      //  过期时间判断
      this.$http.get('https://dati.co-links.com/exam/paper/', {
        uid: wx.getStorageSync('user_id')
      }).then((res) => {
        console.log(res.data)
        if (res.data.code === '0000') {
          var nowDate2 = +new Date()
          var startTime = (formatTime(res.data.data.start_time)).replace(/-/g, '/')
          var endTime = (formatTime(res.data.data.end_time)).replace(/-/g, '/')
         
          if (nowDate2 > +new Date(startTime) &&
            nowDate2 < +new Date(endTime)
          ) {
            console.log(123)
            wx.reLaunch({
              url: '../exam/main'
            })
          } else {
            that.expireTime = true
          }
        } else {
          that.startTime = (formatTime(res.data.data.start_time)).replace(/-/g, '/')
          // that.endTime = 1537358952939
          that.endTime = (formatTime(res.data.data.end_time)).replace(/-/g, '/')
          var nowDate = +new Date()
          if (nowDate > +new Date(that.startTime) &&
            nowDate < +new Date(that.endTime)
          ) {
            if (res.data.code === 'e001') {
              console.log(res.data.data)
              that.effect = res.data.data.effect
              that.actual_name = res.data.data.actual_name
              that.num = res.data.data.num
              that.longtime = res.data.data.longtime
              that.effect_num = res.data.data.effect_num
              that.fraction = res.data.data.fraction
              that.lastHour = parseInt(res.data.data.longtime / 3600)
              that.lastMin = parseInt((res.data.data.longtime - that.lastHour * 3600) / 60)
              that.lastSec = res.data.data.longtime - that.lastHour * 3600 - that.lastMin * 60
              that.commitAnswer = res.data.data.commitanswer ? JSON.parse(res.data.data.commitanswer) : ''
            }
          } else {
            that.expireTime = true
            that.showModel = false
            that.hasAnswer = false
            return false
          }
        }
      }).catch((res) => {
        console.log(res)
        wx.showModal({
          title: '错误提示',
          content: '出现未知错误，请在小程序入口删除，并重新搜索打开'
        })
      })
      // }
    } else {
      this.showModel = true
    }
  }
}
</script>
<style lang="stylus">
.indexMain {
  // background white
  height: 100%;
}

.indexPage {
  height: 100%;
}

.expireTime {
  width: 100%;
  height: 100%;
  position: relative;
}

.expireTime img {
  width: 100%;
  height: 582rpx;
}

.expireTime .outSide {
  text-align: center;
  font-size: 34rpx;
  color: #333;
  position: fixed;
  left: 0rpx;
  top: 127rpx;
  width: 610rpx;
  margin: 0 70rpx;
  background: white;
  height: 814rpx;
  background: transparent;
}

.expireTime .outsideBox {
  position: absolute;
  left: 0rpx;
  top: 0;
  width: 610rpx;
  height: 800rpx;
  background: white;
  border-radius: 16rpx;
  box-shadow: 0 3rpx 3rpx #ccc;
  z-index: 3;
}

.expireTime .outsideBox p {
  text-align: justify;
  padding: 0 30rpx;
  color: #393939;
  font-size: 30rpx;
}

.expireTime .outsideBox .p1 {
  text-align: center;
  padding-top: 100rpx;
  font-weight: bold;
  padding-bottom: 50rpx;
  color: #333;
  font-size: 34rpx;
}

.expireTime .outsideBox .p2 {
  padding-bottom: 50rpx;
}

.expireTime .center {
  position: absolute;
  top: 0;
  left: 25rpx;
  width: 560rpx;
  bottom: 0rpx;
  height: 830rpx;
  background: white;
  border-radius: 12rpx;
  box-shadow: 0 3rpx 3rpx #ccc;
  z-index: 2;
}

.expireTime .inner {
  position: absolute;
  top: 0;
  left: 40rpx;
  width: 520rpx;
  height: 860rpx;
  background: white;
  border-radius: 10rpx;
  box-shadow: 0 3rpx 3rpx #ccc;
  z-index: 1;
}

.topSelected {
  height: 240rpx;
  background: linear-gradient(#00cc76, #1eda8b, #32e098);
  // background #00cc76
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 0 0 32rpx;
  justify-content: space-between;
  flex-wrap: wrap;

  .topCheck {
    color: white;
    font-size: 36rpx;
  }

  .topChoise {
    color: white;
    font-size: 28rpx;
    padding: 20rpx;
    border-top-left-radius: 33rpx;
    border-bottom-left-radius: 33rpx;
    background: rgba(0, 0, 0, 0.3);
    position: relative;

    span {
      padding-left: 20rpx;

      img {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}

.topBg {
  width: 100%;
  height: 444rpx;
  position: relative;

  .bgImg {
    width: 100%;
    height: 181rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .topOpition {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    z-index: 1;
    height: 100%;
    background: white;
    left: 32rpx;
    right: 32rpx;
    padding-top: 55rpx;
    border-radius: 12rpx;
    -webkit-border-radius: 12rpx;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;

    .listItem {
      width: 33.33%;

      img {
        width: 100rpx;
        height: 100rpx;
        display: block;
        margin: 0 auto;
      }

      span {
        text-align: center;
        font-size: 30rpx;
        color: #333333;
        display: block;
        padding: 20rpx 0;
      }
    }
  }
}

.exam {
  padding: 0rpx 32rpx;
  height: 165rpx;
  position: relative;
  margin: 50rpx 0;

  img {
    width: 686rpx;
    height: 186rpx;
  }

  span {
    position: absolute;
    left: 120rpx;
    top: 32rpx;
    font-size: 36rpx;
    color: white;
    font-weight: bold;
  }

  &:after {
    position: absolute;
    left: 120rpx;
    top: 100rpx;
    content: '';
    width: 55rpx;
    height: 6rpx;
    background: white;
  }
}

.examListUl {
  margin: 0 32rpx;
  height: 300rpx;

  li {
    padding-top: 18rpx;
    padding-bottom: 0;
    border-bottom: 2rpx solid #e6e6e6;

    .liHide:nth-child(1) {
      padding-top: 0;
    }
  }
}

.liTop {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding-bottom: 16rpx;

  .leftHexagon {
    width: 29rpx;
    // height 34rpx
    position: relative;
    flex: 1;

    img {
      width: 29rpx;
      height: 34rpx;
      position: absolute;
      margin-top: 10rpx;
      // margin-top 30rpx
    }

    .examTitle {
      font-size: 30rpx;
      color: #000000;
      padding-left: 56rpx;
      display: inline-block;
    }
  }
}

.play {
  width: 45rpx;
  height: 45rpx;
  float: right;

  img {
    width: 45rpx;
    height: 45rpx;
    margin-top: 30rpx;
  }
}

.ctTime {
  padding-bottom: 17rpx;
  border-left: 0;
  // margin-left 14rpx
  padding-left: 60rpx;
}

.liHide {
  font-size: 26rpx;
  color: #333333;
  position: relative;
  // margin-top 8rpx
  padding: 18rpx 0;
  padding-left: 60rpx;
  height: 32rpx;

  &:before {
    position: absolute;
    content: '';
    left: 8rpx;
    top: 50%;
    width: 16rpx;
    height: 16rpx;
    border-radius: 16rpx;
    background: #00cc76;
    z-index: 2;
  }

  &:after {
    position: absolute;
    content: '';
    left: 14rpx;
    top: calc(50% + 20rpx);
    width: 2rpx;
    height: 36rpx;
    background: #00cc76;
    z-index: 1;
  }
}

.subTitle {
  padding-left: 20rpx;
}

.subPlay {
  width: 32rpx;
  height: 32rpx;
  float: right;
  margin-right: 6rpx;

  img {
    width: 32rpx;
    height: 32rpx;
  }
}

.liLast {
  &:after {
    position: absolute;
    content: '';
    left: 14rpx;
    top: 20rpx;
    width: 0rpx;
    height: 36rpx;
    background: #00cc76;
  }
}

.hideExamContent {
  display: none;
}

li.active {
  padding-bottom: 30rpx;
}

li.active .hideExamContent {
  display: block;
}

li.active .ctTime {
  border-left: 2rpx solid #00cc76;
}

.model {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
  z-index: 50;
}

.loginPage {
  width: 100%;
  height: 100%;
  position: relative;
  // background-image: url('https://dati.co-links.com/static/xadmin/images/index.png');
  // background-position: center;
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
}

.loginWrap {
  width: 100%;
  height: 100%;
  /* background-image: url("../images/login.jpg"); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.loginWrap .loginZoom, .loginWrap .fillPassword {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.loginTitle {
  font-size: 0.38rem;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 1.4rem 0;
  background: #00cc75;
  position: relative;
}

.loginTitle:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
}

.loginArea {
  margin: 0 0.76rem;
}

.loginInput {
  position: relative;
  height: 0.8rem;
}

#androidDialog1 {
  display: none;
}

.loginArea {
  margin-top: 0.65rem;
}

.loginArea input {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.3rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  font-size: 0.34rem;
  border: none;
  outline: none;
}

.loginInput input {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 5px #ccc;
}

::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 0.3rem;
}

.loginInput .errorTips {
  position: absolute;
  right: 0.6rem;
  top: 0;
  height: 100%;
  padding-right: 0.6rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/errorTips.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.3rem 0.3rem;
  font-size: 0.24rem;
  color: #e83328;
  line-height: 0.8rem;
  z-index: 999;
  /* display: none; */
}

.loginInput .eyes {
  position: absolute;
  right: 0.3rem;
  top: 0;
  height: 100%;
  width: 0.68rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/eyes2.png');
  background-size: 0.38rem 0.24rem;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;
  /* display: none; */
}

.loginBtn {
  width: 100%;
  height: 0.8rem;
  margin-top: 0.3rem;
}

.loginBtn input {
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.34rem;
  color: #ffffff;
  background: linear-gradient(to right, #04c373 0%, #00e999 100%);
  box-shadow: 0 3px 5px #ccc;
}

.loginTips {
  text-align: center;
  font-size: 0.24rem;
  color: #000;
  margin-top: 0.2rem;
}

// @keyframes shake {
// from, to {
// -webkit-transform: translate3d(0, 0, 0);
// transform: translate3d(0, 0, 0);
// }
// }
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.code {
  text-align: center;
  font-size: 0.24rem;
  color: white;
  padding-top: 0.13rem;
}

.sendCode {
  font-weight: normal;
}

.loginArea .codeArea {
  text-align: center;
}

.loginArea .codeArea input {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.13rem;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0 0.1rem;
}

.codeerrorTips {
  text-align: center;
  padding-top: 0.2rem;
  display: none;
}

.codeerrorTips span {
  display: inline-block;
  position: relative;
  font-size: 0.24rem;
  color: white;
  padding-left: 0.5rem;
}

.codeerrorTips span:before {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  margin-top: -0.15rem;
  width: 0.3rem;
  height: 0.3rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/errorTips.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.3rem 0.3rem;
}

.codeerrorTips span.noTips:before {
  width: 0;
}

.setPassword {
  display: none;
}

.fillPassword {
  /* display: none; */
}

.forgetPassword {
  font-size: 0.24rem;
  color: white;
  text-align: center;
  padding-top: 0.2rem;
}

.forgetPassword a {
  color: #000;
}

button[disabled] {
  color: white;
}

button[disabled]:not([type]) {
  color: rgba(255, 255, 255, 0.7);
  background: #ccc;
}

.tranScoreMain {
  width: 100%;
  height: 100%;
}

.loading {
  position: relative;
  height: 100%;
  width: 100%;

  img {
    display: block;
    width: 237rpx;
    height: 335rpx;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
}

.tranScoreMain {
  height: 100%;
  background: #f7f7f7;
}

.tranScoreTop {
  height: 250rpx;
  background: white;
  text-align: center;
}

.transName {
  font-size: 42rpx;
  color: #666;
  line-height: 88rpx;
  font-weight: bold;
  padding-top: 20rpx;
}

.tranScore {
  font-size: 58rpx;
  color: #ef5151;
  font-weight: bold;
}

.tranDetail {
  margin-top: 20rpx;
  background: white;
  padding: 0 32rpx;
  padding-bottom: 38rpx;
}

.tranDetailTitle {
  height: 88rpx;
  line-height: 88rpx;
  vertical-align: middle;
}

.tranDetailTitle img {
  display: inline-block;
  width: 48rpx;
  height: 50rpx;
  vertical-align: middle;
}

.tranDetailTitle span {
  font-size: 32rpx;
  color: #333333;
}

.tranDetailTotal {
  font-size: 30rpx;
  color: #333333;
}

.tranDetailTotal span {
  color: #00cc76;
  margin-left: -5rpx;
}

.tranTable {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid #e6e6e6;
  font-size: 0;
  margin-top: 15rpx;
  margin-bottom: 40rpx;
}

.trabTableTop, .trabTableList {
  background: #d0f5e6;
  height: 66rpx;
  line-height: 66rpx;
}

.trabTableList, .trabTableBottom {
  background: #fff;
  font-size: 28rpx;
}

.trabTableBottom {
  height: auto;
  padding: 10rpx 20rpx;
  background: #f7f7f7;
  text-align: justify;
}

.trabTableTop p, .trabTableList p {
  display: inline-block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 20%;
  height: 100%;
  font-size: 28rpx;
  color: #333333;
  text-align: center;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

.trabTableTop p {
  color: #333;
}

.trabTableList p {
  color: #666;
}

.tranBtn {
  text-align: center;
  margin-bottom: 38rpx;
}

.tranBtn span {
  display: inline-block;
  width: 290rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  border-radius: 10rpx;
  -webkit-border-radius: 10rpx;
  font-size: 28rpx;
  color: #fff;
  background: #00cc76;
}

.tranBtn .next {
  margin-left: 40rpx;
}

.singleSelection, .MultiSelection, .checkSelection {
  padding: 0 10rpx;
  margin-bottom: 20rpx;
  background: white;

  .title {
    padding-top: 20rpx;
    font-size: 32rpx;
    color: #333333;
  }
}

.singleList {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 30rpx;

  // justify-content: space-between;
  span {
    display: inline-block;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #666666;
    font-size: 32rpx;
    text-align: center;
    line-height: 60rpx;
    background: #e6e6e6;
    margin: 20rpx;

    &.right {
      background: #3ac369;
      color: white;
    }

    &.wrong {
      background: #eb6100;
      color: white;
    }
  }
}

.menuMain {
  margin: 0 -10rpx;
}
</style>
